import React, { useImperativeHandle, useRef, useState } from 'react';

import { intl } from '@/utils';
import { Button, Drawer, Popover, Tabs, Tooltip, Typography } from 'antd';
import getIcon from '@/utils/icon';
import DgAttach from './components/DgAttach';
import DgProps from './components/DgProps';
import type { AuditPaperItem } from '@/pages/AuditPaper/data';
import AntTabs, { HocVerticalRightStyleTab, HocVerticalTab } from '~/public/cpas-ui/components-ui/ant-components/AntTab';
import { CpasIcon } from '~/public/cpas-ui';
/**
 * 审计底稿关系 抽屉 Drawer
 * @param props
 * @returns
 */


const { Text } = Typography;

// type TabType = 'attach' | 'sheets' | 'props';
const RelationDrawer: React.FC<any> = React.forwardRef((props: any, ref) => {
  const [visible, setVisible] = useState(false);
  const [actTab, setActTab] = useState<string>('attach');
  const dginfoRef = useRef<any>({});
  // const refDgProps = useRef<any>();
  const refDgAttach = useRef<any>();
  const [timesData, setTimesData] = useState<string>(`${new Date().getTime()}`);
  const [timesDataFJ, setTimesDataFJ] = useState<string>(`${new Date().getTime()}`);

  // const changeTabs = (infoRef: any, tabsKey: string) => {
  //   if (refDgAttach.current && tabsKey === 'attach') {
  //     refDgAttach.current.reloadList(infoRef?.dgid);
  //   }
  // }

  // 自定义方法
  useImperativeHandle(ref, () => ({
    show: (dgInfo: AuditPaperItem, tab: string) => {
      dginfoRef.current = dgInfo;
      setVisible(true);
      setActTab(tab);
      if (tab === 'props') {
        setTimesData(`${new Date().getTime()}`);
      } else {
        setTimesDataFJ(`${new Date().getTime()}`);
      }

    },
    close: () => {
      setVisible(false);
      dginfoRef.current = {};
    },
  }));
  function RefreshFj(value: boolean) {
    if (value) {
      props.DrawerResh(true);
    }
  }


  return (
    <Drawer
      title={
        <>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'left' }}>
            <span style={{ marginRight: '8px' }}>{getIcon('InfoCircle')}</span>
            <div style={{ width: '350px', fontWeight: 700, overflow: 'hidden', whiteSpace: "nowrap", textOverflow: 'ellipsis' }}>  <Popover
              content={() => (<>{dginfoRef.current?.dgid}</>)} placement="bottom">
              {dginfoRef.current?.dgid}
            </Popover>
            </div>
          </div>
        </>
      }
      maskClosable={false}
      placement="right"
      closable={false}
      onClose={() => {
        setVisible(false);
      }}
      visible={visible}
      getContainer={false}
      key="right"
      width={480}
      extra={
        < Tooltip placement="bottom" title={intl('close', '关闭')} >
          <Button
            type="text"
            danger
            onClick={() => {
              setVisible(false);
            }}
            style={{ color: '#000' }}
          >
            {<CpasIcon type={"icon-close"} fontSize={16} />}
          </Button>
        </Tooltip >
      }
    >
      <HocVerticalRightStyleTab
        // className='DrawerStyle'
        activeKey={actTab}
        tabPosition="right"
        style={{ height: '100%' }}
        onChange={(newActiveKey: string) => {
          if (newActiveKey === 'props') {
            setTimesData(`${new Date().getTime()}`);
          } else {
            setTimesDataFJ(`${new Date().getTime()}`);
          }
          setActTab(newActiveKey);
        }}
        tabBarExtraContent={<Button type="text"> {getIcon('QuestionCircle')} </Button>}
      >
        <AntTabs.Panel
          style={{ height: '100%' }}
          key="attach"
          tab={
            <div style={{ display: 'flex', alignItems: 'baseline' }}>
              <span style={{ marginBottom: '8px', display: 'flex' }}>{getIcon('PaperClip')}</span>
              <span>   {intl('paper.relationDrawer.attach', '附件')}</span>
            </div>
          }
        >
          <DgAttach ref={refDgAttach} RefreshFj={RefreshFj}
            fjChangeTime={timesDataFJ}
            dgid={dginfoRef.current?.dgid}
          />
        </AntTabs.Panel>
        <AntTabs.Panel
          style={{ height: '100%' }}
          key="props"
          tab={
            <span style={{ display: 'flex', alignItems: 'baseline' }}>
              <span style={{ marginBottom: '8px', display: 'flex' }}>{getIcon('InfoCircle')}</span>
              {intl('paper.relationDrawer.props', '属性')}
            </span>
          }
        >
          <DgProps
            dgChangeTime={timesData}
            dgid={dginfoRef.current?.dgid}
            RefreshFj={RefreshFj}
            onCloseDrawer={() => {
              setVisible(false);
            }}
          />
        </AntTabs.Panel>
      </HocVerticalRightStyleTab>
    </Drawer >
  );
});

export default RelationDrawer;
